.console{
    height: 100%;
    width: 100%;
    //border-style: double;
    border:1px solid #96c2f1;
    background:#263238;
    overflow-y: auto;
    overflow-x: auto;
    font-family: Monospace Terminal Arial, serif;
    color: seashell;
    white-space: pre;
    //background: rgb(30, 30, 30);
    p {
        margin: 0;
        span[class="error-log"] {
            color: red;
        }
        span[class="warn-log"] {
            color: #f6ff0e;
        }
        span[class="info-log"] {
            color: #59ff23;
        }
        span[class="line-num"] {
            color:gray;
            margin:0 5px 0 2px;
            min-width: 48px;
            display: inline-block;
        }
    };
    table {
        border: inset olivedrab;
        margin: 0 0 0 15px;
        tr > td, tr > th {
            padding: 0 6px 0 6px;
        }
    }
    .waring {
        background: #1A0037;
    }
    .consoleTitle {
        font-size: 28px;
        text-align: center;
        color: blueviolet;
    }
}

.loading{
    width:150px;
    margin:2px auto;
    text-align: center;
    div{
        width: 18px;
        height: 18px;
        border-radius: 100%;
        display:inline-block;
        background-color: #1ee6e2;
        -webkit-animation: three 1.4s infinite ease-in-out;
        animation: three 1.4s infinite ease-in-out;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
}
.loading .three1{
    -webkit-animation-delay: -0.30s;
    animation-delay: -0.30s;
}
.loading .three2{
    -webkit-animation-delay: -0.15s;
    animation-delay: -0.15s;
}
@-webkit-keyframes three {
    0%, 80%, 100% {-webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
}
@keyframes three {
    0%, 80%, 100% {-webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
}
